<template>
  <div class="select">
    <div class="select-box">
      <el-form :inline="true" :model="selectData" class="demo-form-inline">
        <el-form-item :label="$t(`add.${heading}`)">
          <el-input v-model="selectData.title" :placeholder="$t(`add.${input}`)" />
        </el-form-item>
        <el-form-item :label="$t(`add.${details}`)">
          <el-input v-model="selectData.body" :placeholder="$t(`add.${input}`)" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{$t('add.seek')}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table class="list" :data="data.list[selectData.page]" stripe style="width: 100%">
      <el-table-column prop="id" label="ID" width="60" />
      <el-table-column prop="title" :label="$t(`add.${heading}`)" width="220" />
      <el-table-column prop="body" :label="$t(`add.${details}`)" width="920" />
    </el-table>
    <el-pagination
      @current-change="currentChange"
      layout="prev, pager, next"
      :total="selectData.count"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive } from "@vue/reactivity";
import { InitData, ListInt } from "../../../type/goods";
import { getList } from "../../../http/api";
import { onMounted } from "@vue/runtime-core";

const data = reactive(new InitData());
const { selectData,heading,details,seek,input } = data;

const onSubmit = () => {
  // console.log(selectData);
  let arr: ListInt[] = [];
  if (selectData.title || selectData.body) {
    if(selectData.title) {
      arr = data.dataList.filter((v) => v.title.indexOf(selectData.title) != -1);
    }
    if(selectData.body) {
      arr = (selectData.title?arr:data.dataList).filter((v) => v.body.indexOf(selectData.body) != -1);
    }
  } else {
    arr = data.dataList;
  }
  selectData.count = arr.length;
  selectList(arr);
};
onMounted(() => {
  getList({ page: data.selectData.page }).then((res) => {
    // console.log(res);
    data.dataList = res.data;
    selectData.count = res.data.length;
    selectList(res.data);
  });
});
const currentChange = (page: number) => {
  selectData.page = page - 1;
  console.log(page);
};
//分页
const selectList = (arr: ListInt[]) => {
  data.list = [];
  for (let i = 0; i < arr.length; i += 10) {
    let list: any = arr.slice(i, i + 10); //切 0-9,10-19
    data.list.push(list);
  }
};
</script>

<style lang="scss" scoped>
.select {
  width: 100%;
  height: 100%;
}
:deep(.list) {
 padding-left: 5px;
}
</style>